<template>
  <view class="container">
    <!-- 边列表 -->
    <view v-for="edge in edges" :key="edge.id" class="edge-item">
      <text>起始节点: {{ edge.from_node }}</text>
      <text>目标节点: {{ edge.to_node }}</text>
      <text>权重: {{ edge.weight }}</text>
      <button @click="editEdge(edge)">编辑</button>
      <button @click="deleteEdge(edge.id)">删除</button>
    </view>

    <!-- 添加边 -->
    <view class="add-section">
      <picker mode="selector" :range="locations" @change="onChangeFromNode">
        <view class="picker">{{ newEdge.from_node || '请选择起始节点' }}</view>
      </picker>
      <picker mode="selector" :range="locations" @change="onChangeToNode">
        <view class="picker">{{ newEdge.to_node || '请选择目标节点' }}</view>
      </picker>
      <input type="text" v-model="newEdge.weight" placeholder="权重" />
      <button @click="addEdge">添加边</button>
    </view>

    <!-- 编辑边模态框 -->
    <view v-if="showEditModal" class="edit-modal">
      <modal show-cancel-button="true" @confirm="updateEdge" @cancel="hideEditModal" title="编辑边">
        <view>
          <picker mode="selector" :range="locations" @change="onChangeFromNodeEdit">
            <view class="picker">{{ editingEdge.from_node || '请选择起始节点' }}</view>
          </picker>
          <picker mode="selector" :range="locations" @change="onChangeToNodeEdit">
            <view class="picker">{{ editingEdge.to_node || '请选择目标节点' }}</view>
          </picker>
          <input type="text" v-model="editingEdge.weight" placeholder="权重" />
        </view>
      </modal>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      edges: [],
      locations: [], // 存储所有地点的数组
      newEdge: {
        from_node: '', // 起始节点名称
        to_node: '', // 目标节点名称
        weight: ''
      },
      showEditModal: false,
      editingEdge: {}
    };
  },
  methods: {
    getEdges() {
      uni.request({
        url: 'http://127.0.0.1:3000/api/edge/edge',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && Array.isArray(res.data)) {
            this.edges = res.data;
          } else {
            uni.showToast({ title: '获取边信息失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },
    getAvailableLocations() {
      uni.request({
        url: 'http://127.0.0.1:3000/api/loc/locations', // 更新为正确的API端点
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && Array.isArray(res.data)) {
            this.locations = res.data.map(location => location.spotname); // 假设地点对象有一个spotname属性
          } else {
            uni.showToast({ title: '获取地点信息失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },
    addEdge() {
      const { from_node, to_node, weight } = this.newEdge;
      uni.request({
        url: 'http://127.0.0.1:3000/api/edge/edge/add',
        method: 'POST',
        data: { from_node, to_node, weight },
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({ title: '边添加成功', icon: 'success' });
            this.getEdges(); // 重新加载边列表
            this.resetNewEdge(); // 重置新边表单
          } else {
            uni.showToast({ title: '添加边失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },
    deleteEdge(id) {
      uni.request({
        url: `http://127.0.0.1:3000/api/edge/delete`,
        method: 'DELETE',
        data: { id },
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({ title: '边删除成功', icon: 'success' });
            this.getEdges(); // 重新加载边列表
          } else {
            uni.showToast({ title: '删除边失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },
    editEdge(edge) {
      this.editingEdge = { ...edge };
      this.showEditModal = true;
    },
    updateEdge() {
      const { id, from_node, to_node, weight } = this.editingEdge;
      uni.request({
        url: 'http://127.0.0.1:3000/api/edge/update',
        method: 'PUT',
        data: { id, from_node, to_node, weight },
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({ title: '边更新成功', icon: 'success' });
            this.getEdges(); // 重新加载边列表
            this.hideEditModal(); // 隐藏编辑模态框
          } else {
            uni.showToast({ title: '更新边失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },
    hideEditModal() {
      this.showEditModal = false;
      this.editingEdge = {}; // 清空当前正在编辑的边信息
    },
    onChangeFromNode(e) {
          const index = e.detail.value;
          this.newEdge.from_node = this.locations[index] || '';
        },
        onChangeToNode(e) {
          const index = e.detail.value;
          this.newEdge.to_node = this.locations[index] || '';
        },
        onChangeFromNodeEdit(e) {
          const index = e.detail.value;
          this.editingEdge.from_node = this.locations[index] || '';
        },
        onChangeToNodeEdit(e) {
          const index = e.detail.value;
          this.editingEdge.to_node = this.locations[index] || '';
        },
    resetNewEdge() {
      this.newEdge = { from_node: '', to_node: '', weight: '' };
    }
  },
  onShow() {
    this.getEdges();
    this.getAvailableLocations(); // 获取地点列表
  }
};
</script>

<style>
page {
  background-color: #f7f7f7;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.edge-item {
  border-bottom: 1px solid #eaeaea;
  padding: 15px 0;
}

.edge-item text {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

/* 合并按钮样式 */
.edge-item button, .add-section button {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 16px;
  transition: opacity 0.3s ease; /* 统一悬浮效果 */
}

/* 编辑和删除按钮的悬浮效果 */
.edge-item button:active {
  opacity: 0.8;
}

/* 特别突出添加边的按钮 */
.add-section button {
  background-color: #4CAF50;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 添加边按钮悬浮效果 */
.add-section button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 输入框样式 */
.add-section input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* 下拉选择器样式 */
.picker {
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* 模态框样式 */
.edit-modal {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}
</style>